<template>
	<view class="history page">
		<div class="title-box">
			<div>总里程</div>
			<div>{{ getDate() }}至今日</div>
		</div>
		<div class="value-box">
			<div class="value">
				{{ total}}
				<span class="unit">公里</span>
			</div>
		</div>
		<div class="list-box">
			<div class="list-item" v-for="item in list" :key="item.name">
				<div class="label">{{ item.name }}</div>
				<div class="value">{{ item.value }}</div>
			</div>
		</div>
		<div class="chart-box">
			<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
		</div>
		<div class="data-list">
			<div class="data-item" v-for="item in tableData" :key="item.id">
				<div class="data-left">
					<div class="data-name">跑步11.1千米</div>
					<div class="data-value-box">
						<div class="data-value">
							用时00:17:15
						</div>
						<div class="data-value">
							平均速度00:07:15/千米
						</div>
						<div class="data-value">
							消耗热量516千卡
						</div>
					</div>
				</div>
				<div class="data-time">{{ item.date }}</div>
			</div>
		</div>
	</view>
</template>

<script>
	import http from '@/api/api.js'
	import echarts from '@/components/echarts-uniapp/echarts-uniapp'
  const getDate = (num) => {
      let day = new Date().getDate() - num
      day = day < 9 ? '0' + day : day
      let month = new Date().getMonth() + 1
      return `${month}/${day}`
  }
	export default {
		components: {
			echarts
		},
		data() {
			return {
				total: 0,
				list: [{
						name: '次数',
						value: 0
					},
					{
						name: '时长',
						value: '00:00:00'
					},
					{
						name: '平均速度',
						value: '0/KM'
					},
					{
						name: '消耗（千卡）',
						value: 0
					},
				],
				tableData: [
				],
				option: {
     
            }
        }
      },
      onLoad() {
        setTimeout(() => {
            this.option = {
                grid: {
                    top: 40,
                    left: 0,
                    right: 0,
                    bottom: 10,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [getDate(6), getDate(5), getDate(4),getDate(3),getDate(2),getDate(1),getDate(0)],
                    axisLabel: {
                        textStyle: {
                            color: '#999999',
                            fontSize: 12
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#C0C0C0',
                            type: [5, 10],
                            dashOffset: 5
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#999999',
                            fontSize: 12
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#C0C0C0',
                            type: [5, 10],
                            dashOffset: 5
                        }
                    }
                },
                series: [
                    {
                        data: [0, 0, 0, 0, 0, 0, 0],
                        type: 'bar',
                        barWidth: 13,
                        itemStyle: {
                            color: '#33BE61'
                        },
                    }
                ]
            }
        }, 300)
      },
	methods: {
		getDate() {
			let year = new Date().getFullYear()
			let month = new Date().getMonth() + 1
			month = month < 10 ? '0' + month : month
			let day = new Date().getDate()
			day = day < 10 ? '0' + day : day
			return `${year}-${month}-${day}`
		},
		getData() {
			http.getHome({}).then(res => {
				if (res.code === 0) {
					console.log(res.data)
				}
			})
		},
	}
	}
</script>

<style lang="less">
	.history {
		height: 100vh;
		overflow: auto;
		padding: 32rpx;
		background-color: #ffffff;
      .chart-box {
          height: 350rpx;
      }
		.data-list {
			.data-item {
				display: flex;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 1px solid #D8D8D8;

				.data-left {
					flex-grow: 1;
				}

				.data-time {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #999999;
				}

				.data-name {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-bottom: 14rpx;
				}

				.data-value-box {
					display: flex;
					align-items: center;

					.data-value {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-right: 30rpx;
					}
				}
			}
		}

		.title-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 32rpx;
		}

		.value-box {
			font-size: 60rpx;
			line-height: 46rpx;
			font-family: DIN;
			font-weight: bold;
			color: #333333;
			margin-bottom: 39rpx;

			.unit {
				color: #999999;
				font-size: 24rpx;
			}
		}

		.list-box {
			display: flex;
			justify-content: space-between;

			.list-item {
				.label {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-bottom: 10rpx;
				}

				.value {
					font-size: 32rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}
			}
		}
	}
</style>
